import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/layout/index.vue'

const routes = [
  {
    path: '/',
    redirect: '/home',
    component: Layout,
    children: [
      // 首页
      {
        path: 'home',
        name: 'home',
        component: () => import('@/views/home/index.vue'),
        meta: { title: '首页' }
      },
      // 商品一级分类
      {
        path: '/category/:id',
        name: 'category',
        component: () => import('@/views/category/index.vue'),
        meta: { title: '商品分类' }
      },
      // 商品二级分类
      {
        path: '/category/sub/:id',
        name: 'subCategory',
        component: () => import('@/views/category/sub/index.vue'),
        meta: { title: '商品二级分类' }
      },
      // 用户
      {
        path: '/user',
        component: () => import('@/views/user/layout/index.vue'),
        meta: { title: '用户' },
        children: [
          // 个人中心
          {
            path: '',
            redirect: '/user/personal'
          },
          {
            path: 'personal',
            name: 'personal',
            component: () => import('@/views/user/personal/index.vue'),
            meta: { title: '个人中心' }
          },
          // 个人信息
          {
            path: 'info',
            name: 'info',
            component: () => import('@/views/user/info/index.vue'),
            meta: { title: '个人信息' }
          },
          // 我的足迹
          {
            path: 'feed',
            name: 'feed',
            component: () => import('@/views/user/feed/index.vue'),
            meta: { title: '我的足迹' }
          },
          // 订单管理
          {
            path: 'order',
            name: 'order',
            component: () => import('@/views/user/order/index.vue'),
            meta: { title: '订单管理' }
          },
          // 订单详情
          {
            path: 'order/:id',
            name: 'orderDetail',
            component: () => import('@/views/user/order/detail/index.vue'),
            meta: { title: '订单详情' }
          },
          // 收藏商品
          {
            path: 'collect',
            name: 'collect',
            component: () => import('@/views/user/collect/index.vue'),
            meta: { title: '收藏商品' }
          },
          {
            path: 'address',
            name: 'address',
            component: () => import('@/views/user/address/index.vue'),
            meta: { title: '地址管理' }
          }
        ]
      },
      // 购物车
      {
        path: '/cart',
        name: 'cart',
        component: () => import('@/views/cart/index.vue'),
        meta: { title: '购物车' }
      },
      // 结算页
      {
        path: '/checkout',
        name: 'checkout',
        component: () => import('@/views/cart/checkout/index.vue'),
        meta: { title: '结算页' }
      },
      // 商品详情
      {
        path: '/detail/:id',
        name: 'detail',
        component: () => import('@/views/detail/index.vue'),
        meta: { title: '商品详情' }
      },
      // 待支付页面
      {
        path: 'pay/:id',
        name: 'pay',
        component: () => import('@/views/user/order/pay/index.vue'),
        meta: { title: '支付' }
      }
    ]
  },
  // 登录页
  {
    path: '/login',
    // 这里的别名是为了后面在登录成功后，可以直接跳转到登录成功后的页面
    alias: '/login/callback',
    name: 'login',
    component: () => import('@/views/login/index.vue'),
    meta: { title: '登录' }
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior (to, from, savedPosition) {
    // 如果有 savedPosition，滚动到保存的位置
    if (savedPosition) {
      return savedPosition
    } else {
      // 否则滚动到顶部
      return { top: 0 }
    }
  }
})

export default router
